import React, { Component, Fragment } from 'react';
import { Col, Row, Checkbox, Switch, Collapse, Card, Avatar, Type, Icon } from 'antd';
import globalStyles from '../../style/common.less';

const customCardStyle = {
  width: 130,
  marginBottom: 20,
};
const customCardSelectedStyle = {
  width: 130,
  marginBottom: 20,
  boxShadow: '0 4px 16px #188df0',
  borderColor: 'rgba(0, 0, 0, 0.2)',
};

const customMetaStyle = {
  color: '#fff',
  backgroundColor: 'rgba(0,0,0,0)',
};

const { Meta } = Card;
class DataPanel extends Component {
  handleCardSelect = e => {
    const { onSelectData,data } = this.props;
    if (onSelectData) {
      console.log(e.currentTarget.id)
      onSelectData(data.find(item => item.id === e.currentTarget.id));
    }
  };
  render() {
    const { data } = this.props;
    return (
      <div style={{ padding: '8px 16px 8px 8px' }}>
        {data.map((item, index) => {
          return (
            <div
              key={index}
              style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}
            >
              <Card
                id={item.id}
                tag={item}
                style={item.selected?customCardSelectedStyle:customCardStyle}
                bordered={false}
                onClick={this.handleCardSelect}
                hoverable
                cover={<img alt="icon" src={item.icon} />}
              >
                <Meta style={customMetaStyle} title={item.title} description={item.subtitle} />
              </Card>
            </div>
          );
        })}
      </div>
    );
  }
}

export default DataPanel;
